<template>
  <div class="payrollDetail-box content-box">
    <nav-title title="工资单" :routerLink="routerLink" />
    <div class="regulations-box">
      <div class="info-cell">
        <div class="label2">发薪年份</div>
        <div class="value2">
          <group>
            <datetime placeholder="请选择" format="YYYY" v-model="year" @on-change="yearChange" />
          </group>
        </div>
      </div>
      <div class="info-cell">
        <div class="label2">发薪月份</div>
        <div class="value2">
          <group>
            <popup-radio placeholder="请选择" :options="calRunIdList" v-model="calRunId" @on-change="payrollChange" />
          </group>
        </div>
      </div>
    </div>
    <div class="payrollDetail-content">
      <div>
        <p>{{Payable[0] ? Payable[0]: '0'}}.<span>{{Payable[1] ? Payable[1]: '00'}}</span></p>
        <p>应发工资(元)</p>
      </div>
      <div></div>
      <div>
        <p>{{Realwage[0] ? Realwage[0]: '0'}}.<span>{{Realwage[1] ? Realwage[1]: '00'}}</span></p>
        <p>实发工资(元)</p>
      </div>
    </div>
    <div class="payrollDetail-list">
      <div v-for="(list, index) in lists" v-bind:key="'pd_'+index">
        <p class="payrollDetail-list-first">
          <span class="first_title">{{list.name}}</span>
          <span v-if="list.name!='薪资说明'">{{list.value}}</span>
          <img src="./images/u3687.png" v-if="list.showChildren" alt="" @click="listClick(index)">
          <img src="./images/u3688.png" v-else="" alt="" @click="listClick(index)">
        </p>
        <ul v-if="list.children && list.showChildren">
          <li v-for="item in list.children" v-bind:key="'ot_'+item.name">
            <p class="payrollDetail-list-second">
              <span>{{item.name}}</span>
              <span>{{item.value}}</span>
            </p>
          </li>
        </ul>
        <x-textarea :autosize="true" class="payrollDetail-list-second" :readonly="true" v-if="list.name=='薪资说明' && list.showChildren"
          v-model="list.value"></x-textarea>
      </div>
    </div>
    <div>
    </div>
  </div>
</template>

<script>
  import { Group, PopupRadio, Datetime, XTextarea } from 'vux';
  import { getPaySlip } from './../../api/api';
  import cloneDeep from 'lodash/clonedeep';
  import qs from 'qs';
  export default {
    name: 'payrollDetail',
    components: {
      Group,
      PopupRadio,
      Datetime,
      XTextarea,
    },
    created() {
      this.year = new Date().getFullYear();
      console.log(new Date().getMonth());
      if(new Date().getMonth() == 0) {
        this.year = this.year - 1;
      }
       this.year = this.year.toString();
    },
    mounted() {
      this.getData();
    },
    data() {
      return {
        routerLink: '',
        year: '',
        allInfo: [],
        calRunIdList: [],
        calRunId: '',
        Payable: [],
        Realwage: [],
        lists: [ ],
      }
    },
    methods: {
      getData() {
        const param = {
          year: this.year,
          calRunId: '',
        };
        getPaySlip(param)
          .then((res)=>{
            if (res && res.retCode === '000000') {
              console.log(res);
              if (res.retData.length > 0 ) {
                this.allInfo = res.retData;
                const calRunIdList = [];
                res.retData.map((item)=>{
                  const obj = {
                    key: item.calRunId,
                    value: item.descr
                  }
                  calRunIdList.push(obj);
                });
                this.calRunIdList = calRunIdList;
                const length = res.retData.length;
                this.calRunId = res.retData[0].calRunId;
                this.Payable = res.retData[0].cAmt001.toString().split('.');
                this.Realwage = res.retData[0].cAmt002.toString().split('.');
                const newPaySlips = cloneDeep(res.retData[0].paySlips);
                newPaySlips.map((item)=>{
                  if(item.name == '薪资说明'){
                    item.showChildren = true;
                  }else{
                    item.showChildren = false;
                  }
                });
                this.lists = newPaySlips;
              } else {
                this.$vux.alert.show({
                  title: '提示',
                  content: '您选择的时间暂无工资单数据！',
                })
              }
            } else {
              this.$vux.alert.show({
                title: '提示',
                content: res.retMsg
              })
            }
          })
          .catch(res => {
            this.$vux.loading.hide();
            this.$vux.alert.show({
              title: '警告',
              content: '网络异常，请稍后重试'
            })
          })
      },
      yearChange() {
        this.lists = [];
        this.calRunIdList = [];
        this.calRunId = '';
        this.Payable = [];
        this.Realwage = [];
        this.allInfo = [];
        this.getData();
      },
      payrollChange(value, item) {
        this.Payable = [];
        this.Realwage = [];
        let data = {};
        this.allInfo.map((item)=>{
          if (item.calRunId == this.calRunId) data = item;
        });
        if (data.cAmt001) this.Payable = data.cAmt001.toString().split('.');
        if (data.cAmt002) this.Realwage = data.cAmt002.toString().split('.');
        if (data.paySlips) {
          const newPaySlips = cloneDeep(data.paySlips);
          newPaySlips.map((item)=>{
            if(item.name == '薪资说明'){
              item.showChildren = true;
            }else{
              item.showChildren = false;
            }
          });
          this.lists = newPaySlips;
        }

      },
      listClick(index) {
        if (this.lists[index].showChildren) return  this.lists[index].showChildren = false;
        this.lists.map((item)=>{
          item.showChildren = false;
        });
        this.lists[index].showChildren = true;
      }
    }
  }
</script>

<style type="text/scss" lang="scss">
  @import '../../styles/staff.scss';
  .content-box.payrollDetail-box{
    .regulations-box{
      .info-cell{
        padding-right: 10px;
        .label2{
          text-align: right;
          flex: 2;
          line-height: 45px;
        }
        .value2{
          flex: 9;
          .weui-cell__ft{
            width: 100%;
            text-align: left;
            border: 1px solid #ccc;
            padding-left: 5px;
            line-height: 37px;
            background: url('./images/u3664.png') right 9px no-repeat;
            background-size: 24px;
          }
          .weui-cell_access .weui-cell__ft:after{
            content: none;
          }
        }
      }
    }
    .payrollDetail-content{
      padding: 15px 0;
      width: 96%;
      margin: 0 auto;
      background-color: rgba(200, 226, 254, 1);
      border: 1px solid rgba(227, 243, 255, 1);
      >div{
        display: inline-block;
      }
      >div:nth-child(1),
      >div:nth-child(3){
        line-height: 30px;
        font-size: 18px;
        text-align: center;
        padding: 20px 0;
        >p:nth-child(2){
          color: #666;
        }
        >p:nth-child(1){
          font-size: 20px;
          >span{
            font-size: 16px;
          }
        }
      }
      >div:nth-child(1){
        padding-right: 20px;
      }
      >div:nth-child(3){
        padding-left: 20px;
      }
      >div:nth-child(2) {
        width: 2px;
        height: 80px;
        background-color: #ccc;
      }
    }
    .payrollDetail-list {
      padding: 0 10px;
      margin-top: 20px;
      >div:first-child{
        border-top: 1px solid #ccc;
      }
      p{
        line-height: 40px;
        height: 40px;
        font-size: 16px;
        border-bottom: 1px solid #ccc;
        padding-left: 10px;
        position: relative;
        span:first-child{
          float: left;
        }
        span:nth-child(2){
          position: absolute;
          right: 80px;
        }
      }
      .payrollDetail-list-first{
        .first_title{
          font-size: 18px;
          font-weight: 600;
        }
        img{
          position: absolute;
          right: 15px;
          top: 8px;
        }
      }
      .payrollDetail-list-second{
        padding-left: 40px;
        span:nth-child(2){
          position: absolute;
          right: 70px;
        }
      }
    }
  }
</style>
